<template>
  <div style="width: 100%; height: 100%">
    <!-- 查询框 -->
    <div>
      <el-tag>工作类别</el-tag>
      <el-input v-model="keyword" style="width: 300px; margin-left: 10px; margin-right: 10px" placeholder="请输入关键词"></el-input>
      <el-button type="primary" @click="fetchJobs">查询</el-button>
      <el-button type="info" @click="reset">重置</el-button>
    </div>

    <!-- 职位列表 -->
    <div style="margin: 10px 0">
      <el-table :data="jobData" stripe :header-cell-style="{ backgroundColor: 'aliceblue', color: '#666' }">
        <el-table-column prop="job_id" label="序号" width="70" align="center"></el-table-column>
        <el-table-column prop="job_title" label="职位名称"></el-table-column>
        <el-table-column prop="job_description" label="职位描述"></el-table-column>
        <el-table-column prop="requirements" label="职位要求"></el-table-column>
        <el-table-column prop="location" label="工作地点"></el-table-column>
        <el-table-column prop="salary" label="薪资"></el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button size="mini" type="success" plain @click="applyForJob(scope.row)">申请</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 申请状态列表 -->
    <div style="margin: 10px 0">
      <h2>申请状态</h2>
      <el-table :data="applications" stripe :header-cell-style="{ backgroundColor: 'aliceblue', color: '#666' }">
        <el-table-column prop="application_id" label="申请ID" width="70" align="center"></el-table-column>
        <el-table-column prop="job_title" label="职位名称"></el-table-column>
        <el-table-column prop="application_status" label="申请状态">
          <template slot-scope="scope">
            {{application_statusWacth(scope.row)}}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "JobApplicationView",
  data() {
    return {
      student: '12345', // 假设学生ID为12345
      keyword: '', // 查询关键词
      jobData: [], // 职位列表
      applications: [] // 申请状态列表
    };
  },
  mounted() {
    this.fetchApplications();
  },
  methods: {
    application_statusWacth(row){
      if (row.application_status==='submitted'){
        return '已提交';
      }
      if (row.application_status==='shortlisted'){
        return '已入围';
      }else{
        if (row.application_status==='interviewed'){
          return '已面试';
        }
        if (row.application_status==='accepted'){
          return '已录用';
        }
        if (row.application_status==='rejected'){
          return '拒绝录用';
        }
        if (row.application_status==='uninterview'){
          return '待面试';
        }
      }

    },
    // 获取职位信息
    fetchJobs() {
      let url = 'http://localhost:8080/JobManger/selectAll';
      let params = {
        keyword: this.keyword
      };
      axios.get(url, { params })
          .then(response => {
            let idsInArray2 = this.applications.map(obj => obj.job_id);
            this.jobData =  response.data.data.filter(obj => !idsInArray2.includes(obj.job_id));
          })
          .catch(error => {
            console.error('Error fetching jobs:', error);
          });
    },

    // 获取申请状态
    fetchApplications() {
      axios.get('http://localhost:8080/applications/getAllApplications')
          .then(response => {
            this.applications = response.data.data.filter(item => item.student_id == localStorage.getItem('student_id'));
            this.fetchJobs();
          })
          .catch(error => {
            console.error('Error fetching applications:', error);
          });
    },

    // 申请职位
    applyForJob(job) {
      const application = {
        student_id: localStorage.getItem("student_id"),
        job_id: job.job_id,
        job_title: job.job_title,
        application_status: 'submitted'
      };
      console.log(application)
      axios.post("http://localhost:8080/applications/apply", application)
          .then(response => {
            this.$message.success("申请成功");
            this.fetchApplications(); // 刷新申请状态
          })
          .catch(error => {
            console.error('Error applying for job:', error);
            this.$message.error("申请失败");
          });
    },

    // 重置查询条件
    reset() {
      this.keyword = '';
      this.fetchJobs();
    }
  }
};
</script>

<style scoped>
.table-container {
  margin-top: 20px;
}
</style>